<template>
	<view>
		<view class="searchBox">
			<view class="search">
				<view class="left" @click="toCity">
					<text class="u-font-26">{{mycity}}</text>
					<image src="/static/down.png" mode="heightFix"></image>
				</view>
				<view class="input">
					<input type="text" placeholder="输入技师姓名">
					<u-icon name="search" color="#1C274C" size="28"></u-icon>
				</view>
			</view>
			<view class="right_box">
				<view class=" " v-for='(i,index) in showway' @click="chooseshowway(index)"
					:class="current==index?'act':''">{{i}}</view>
				<!-- <view>地图</view> -->
			</view>
		</view>
		<view v-if="list.length&& current==0">
			<view class="cardBox" v-for="(item,index) in list" :key="index" @click="toJsDetails">
				<view class="up">
					<view class="left">
						<image src="/static/onLine.png" mode="widthFix"></image>
						<text>当前可服务</text>
					</view>
					<view class="right">
						<image src="/static/address_grey.png" mode="widthFix"></image>
						<text>距您 2.5km</text>
					</view>
				</view>
				<view class="center">
					<view class="touxiang">
						<image src="/static/touxiang.png" mode="widthFix"></image>
						<view class="pingfen">
							<image src="/static/star.png" mode="widthFix"></image>
							<text>5.0</text>
						</view>
					</view>
					<view class="rightBox">
						<view class="name">姜小宛</view>
						<view class="num">已接297单</view>
						<view class="pinglun">
							<view class="p">
								<image src="/static/pingjia.png" mode="widthFix"></image>
								<text>1060</text>
							</view>
							<view class="zan">
								<image src="/static/xin.png" mode="widthFix"></image>
								<text>561</text>
							</view>
							<!-- <image class="select" src="/static/selected.png" mode="widthFix"></image> -->
							<view class="liji white">
								立即预约
							</view>
						</view>
						<view class="store">
							<image src="/static/store.png" mode="widthFix"></image>
							<text>风之语</text>
							<image src="/static/right.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noData" v-if="current==0&&list.length==0">
			<image class="img" src="/static/noData.png" mode=""></image>
			<text>当前城市暂未开通到家服务</text>
		</view>
		<view class="mapbox" v-if="current==1">
			<map @markertap='markertaps' @callouttap="zcx" style="width: 100%; height: 100%;"
				:latitude="latitude" :longitude="longitude" :markers="covers">
			</map>
			<!-- <cover-view class="cover-view" v-if="current==1">
				<cover-view @click="refresh">
					<cover-image class="cover-image" src="/static/address.png"></cover-image>
					<cover-view>刷新</cover-view>
				</cover-view>
			</cover-view> -->
			<view>
				<scroll-view class="jishiscrool flex">
					<u-scroll-list :indicator='false'>
						<view class="cardBox" v-for="(item,index) in list" :key="index" @click="toJsDetails">
							<view class="up">
								<view class="left">
									<image src="/static/onLine.png" mode="widthFix"></image>
									<text>当前可服务</text>
								</view>
								<view class="right">
									<image src="/static/address_grey.png" mode="widthFix"></image>
									<text>距您 2.5km</text>
								</view>
							</view>
							<view class="center">
								<view class="touxiang">
									<image src="/static/touxiang.png" mode="widthFix"></image>
									<view class="pingfen">
										<image src="/static/star.png" mode="widthFix"></image>
										<text>5.0</text>
									</view>
								</view>
								<view class="rightBox">
									<view class="name">姜小宛</view>
									<view class="num">已接297单</view>
									<view class="pinglun">
										<view class="p">
											<image src="/static/pingjia.png" mode="widthFix"></image>
											<text>1060</text>
										</view>
										<view class="zan">
											<image src="/static/xin.png" mode="widthFix"></image>
											<text>561</text>
										</view>
										<!-- <image class="select" src="/static/selected.png" mode="widthFix"></image> -->
										<view class="liji white">
											立即预约
										</view>
									</view>
									<view class="store">
										<image src="/static/store.png" mode="widthFix"></image>
										<text>风之语</text>
										<image src="/static/right.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
					</u-scroll-list>

				</scroll-view>
			</view>
			<!-- #ifdef APP-PLUS -->
				<cover-view class="appspecial" v-show="current==0">
					
				</cover-view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mycity: '郑州市',
				barHeight: '',
				list: [1, 2, 3, 4, 5],
				showway: ['列表', '地图'],
				current: 0,
				title: 'map',
				latitude: 34.79977, //纬度
				longitude: 113.66072, //经度
				covers: [{
					id: 0,
					latitude: 34.79977, //纬度
					longitude: 113.66072, //经度
					iconPath: '../../static/address.png',
					title: 'id:1',
					width: 20, //宽
					height: 20, //高 
					callout: { //自定义标记点上方的气泡窗口 点击有效  
						content: '智能指挥管理郑州项目金水区纪检委', //文本
						color: '#ffffff', //文字颜色
						fontSize: 15, //文本大小
						borderRadius: 15, //边框圆角
						padding: '10',
						bgColor: '#406390', //背景颜色
						display: 'ALWAYS', //常显
					}

				}, {
					id: 1,
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../static/address.png',
					title: 'id:2',
					callout: { //自定义标记点上方的气泡窗口 点击有效
						content: '智能指挥管理郑州项目金水区纪检委', //文本
						color: '#ffffff', //文字颜色
						fontSize: 15, //文本大小
						borderRadius: 15, //边框圆角
						padding: '10',
						bgColor: '#406390', //背景颜色
						display: 'ALWAYS', //常显
					}
				}],
				list: [{
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
				}]
			};
		},
		onLoad() {

			var that = this
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					that.covers[0].latitude = res.latitude
					that.covers[0].longitude = res.longitude
					that.latitude = res.latitude
					that.longitude = res.longitude
				}
			});
		},
		methods: {
			markertaps() {
				uni.showModal({
					title: '提示',
					content: '地图点击事件，标记点'
				})

			},
			zcx() {
				uni.showModal({
					title: '提示',
					content: '地图点击事件，气泡标签'
				})

			},
			prevDateFun(object) {
				this.mycity = object.myctiy
			},
			chooseshowway(index) {
				this.current = index
			},
			toReservation() {
				uni.navigateTo({
					url: '/pages/reservation/reservation'
				})
			},
			toCity() {
				uni.navigateTo({
					url: '/pages/selectCity/selectCity'
				});
			},
			toJsDetails() {
				uni.navigateTo({
					url: '/pages_technician/jsDetails/jsDetails'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F7F7FA;
		padding-bottom: 30rpx;
	}

	.searchBox {
		background-color: #fff;
		width: 750rpx;
		padding: 100rpx 0 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.search {
			width: 420rpx;
			height: 83rpx;
			border-radius: 42rpx;
			border: 3rpx solid #1C274C;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 32rpx;
			margin: 0 auto;
			background-color: #fff;

			.left {
				width: 110rpx;
				font-size: 12rpx;
				display: flex;
				align-items: center;
				border-right: 1rpx solid #000;

				image {
					width: 14rpx;
					height: 9rpx;
					margin-left: 10rpx;
				}
			}

			.input {
				width: 230rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				input {
					margin-left: 20rpx;
				}

				.input-placeholder {
					font-size: 24rpx;
				}
			}
		}

		.right_box {
			width: 197rpx;
			height: 66rpx;
			background: #F7F7FA;
			border-radius: 33rpx;
			margin-right: 32rpx;
			font-size: 24rpx;
			color: #A4A9B7;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 10rpx;
			box-sizing: border-box;

			.act {
				width: 88rpx;
				height: 50rpx;
				background: #00CE9B;
				border-radius: 33rpx;
				line-height: 50rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}
	}

	.cardBox {
		min-width: 686rpx;
		max-width: 686rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 30rpx auto 0;
		padding: 20rpx 0 20rpx 30rpx;
		box-sizing: border-box;

		.up {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			font-weight: 500;
			padding-right: 30rpx;
			color: #00CE9B;

			.left {
				display: flex;
				align-items: center;
			}

			image {
				width: 24rpx;
				margin-right: 10rpx;
			}

			.right {
				display: flex;
				align-items: center;
				color: #1C274C;
			}
		}

		.center {
			display: flex;
			margin-top: 40rpx;

			.touxiang {
				width: 142rpx;
				position: relative;
				margin-right: 20rpx;

				image {
					width: 142rpx;
				}

				.pingfen {
					width: 99rpx;
					height: 38rpx;
					background: #FE6051;
					border-radius: 28rpx;
					font-size: 24rpx;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					bottom: -10rpx;
					left: 50%;
					transform: translateX(-50%);

					image {
						width: 20rpx;
						margin-right: 8rpx;
					}
				}
			}

			.rightBox {
				width: 100%;
				position: relative;

				.name {
					font-size: 30rpx;
					font-weight: 600;
					color: #1C274C;
					line-height: 42rpx;
				}

				.num {
					width: 140rpx;
					height: 40rpx;
					border-radius: 10rpx;
					border: 2rpx solid #00CE9B;
					font-size: 20rpx;
					font-weight: 400;
					color: #00CE9B;
					line-height: 40rpx;
					text-align: center;
					margin: 15rpx 0 20rpx;
				}

				.pinglun {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #1C274C;
					position: relative;

					image {
						width: 26rpx;
						margin-right: 10rpx;
					}

					.p {
						border-right: 1rpx solid rgba(28, 39, 76, .3);
						padding-right: 30rpx;
					}

					.zan {
						padding-left: 30rpx;
					}

					.liji {
						width: 150rpx;
						height: 56rpx;
						background: $uni-primary;
						border-radius: 28rpx;
						text-align: center;
						line-height: 56rpx;
						position: absolute;
						right: 30rpx;
					}


					.select {
						width: 32rpx;
						margin: 0;
						position: absolute;
						right: 30rpx;
					}
				}

				.store {
					width: 159rpx;
					height: 57rpx;
					background: #EBFBF7;
					border-radius: 100rpx 0rpx 0rpx 100rpx;
					font-size: 22rpx;
					color: #00CE9B;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					top: 0;
					right: 0;

					image:first-child {
						width: 24rpx;
						margin-right: 10rpx;
					}

					image:last-child {
						margin-left: 12rpx;
						width: 10rpx;
					}
				}
			}
		}
	}

	.noData {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;
		color: #747A91;
		margin-top: 400rpx;

		.img {
			width: 442rpx;
			height: 316rpx;
			margin-bottom: 60rpx;
		}
	}

	.mapbox {
		width: 750rpx;
		height: 1000rpx;
		position: relative;

		.jishiscrool {
			position: absolute;
			bottom: 20%;
			white-space: nowrap;
			z-index: 9999;
		}
	}
	.appspecial{
		background-color: white;
		width: 100vw;
		height: 300rpx;
		border-radius: 20rpx;
		position: absolute;
		bottom: 15%;
	}
</style>